<ion-header>
  <ion-navbar>
    <ion-title>挑战详情</ion-title>
    <ion-buttons end>
      <button icon-only ion-button (click)="showMoreActionModal()">
        <ion-icon md="ios-more" ios="ios-more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="请稍等...">
    </ion-refresher-content>
  </ion-refresher>
  <div class=" " data-control="CONTENT" id="ScrollContent_dMIpN4" style="padding-bottom: 4em;" *ngIf="pageDataIsok">
    <div class="scrollbox">
      <!-- 在此写内容 -->
      <div class="ub ub-ver bc-bg">
        <div class="ub-img1  tiaozhan_wh umar-b" id="bcImg">
          <img class="ub-con" src="{{ pageData[0].PicUrl | imgUrl:'base64'}}" />
          <div class="ub ub-ac ub-pc ub-ver  ub-con color_white" style="background-color: rgba(0,0,0,0.25);">
            <div class="ub ub-ac">
              <div class="ub-f1 width_hr ubb"></div>
              <img id="patternImg" src="{{pageData[0].pattern | dataWallet:'PatternIMg' }}" style="width: 2.5em;height: 2.5em;margin: 0.3em;"
              />
              <div class="ub-f1 width_hr ubb"></div>
            </div>
            <div>
              <h2 id="tittle">{{pageData[0].Title}}</h2>
            </div>
            <div class="ub maxW fontsize8">
              <div class="ub ub-ac ub-pc ub-ver ub-f1 ub-con">
                <div class="ub ub-pc  ub-ac  umar-t">
                  <div id="personNum"> {{pageData[0].Pattern | dataWallet:"Pattern"}} </div>
                  <div class="l_mar_r"> | </div>
                  <div id="Classify">{{pageData[0].Classify | dataWallet:"Classify"}}</div>
                </div>
                <div class="ub ub-pc mar_t7">
                  <div class="ub" style="visibility:collapse;" id="userlist">
                    <div class="ub ub-ac" id="userlist1">
                      <ng-container *ngIf=" pageData[0].State==30 && pageData[0].State==20 ">
                        <div *ngFor="let item of pageData[0].joinlist" class="ub ub-ac ub-pc ub-ver umar-r">
                          <div class="ub-img1 user_wh">
                            <img src="{{item.HeadPortrait | imgUrl:'base64'}}" alt="" srcset="" />
                            <img *ngIf="pageData[0].State==30&&item.Judge==1" src="assets/img/huangguan.png" style="width: 1em;position: absolute;margin-top: -0.7em;left:0.5em;"
                            />
                          </div>
                          <div>
                            <ng-container *ngIf="pageData[0].Classify==30; else elseTemplate">
                              {{item.Judge==1?'完成':'未完成'}}
                            </ng-container>
                            <ng-template #elseTemplate>
                              {{item.DoWeek}}天/周
                            </ng-template>
                          </div>
                        </div>
                      </ng-container>
                    </div>
                    <div (click)="openCR()" class="ub-img jiayou_wh umar-r" style="background-image: url(assets/imgs/img/gengduo.png);"></div>
                  </div>
                  <div class="ub" style="padding-top: 0.4em;">
                    <div id="Integral" class="umar-r"></div>
                    <div class="ub-img1 zuanshi_wh zuanshi_img umar-r"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="background:#FFF;width:100%;">
        <div class="ub tabs-f1">
          <div class="ub-f1" (click)="navSelected(0)" [ngClass]="{'act':act[0] }">
            规则
          </div>
          <div class="ub-f1" (click)="navSelected(1)" [ngClass]="{'act':act[1] }">
            排行
          </div>
          <div class="ub-f1" (click)="navSelected(2)" [ngClass]="{'act':act[2]}">
            打卡
          </div>
        </div>

      </div>
      <!-- 规则 -->
      <div [hidden]="!(act[0])">
        <!-- 挑战内容 -->
        <div class="ub ub-ver pad_left7  maxW bor bc-head">
          <div class="ub ub-ac umh5 fontsize9">
            挑战内容
          </div>
          <div class="umar-b word_break" style="line-height: 1.5em;" id="content" [innerHTML]="pageData[0].Describe"> </div>
        </div>
        <!-- 挑战规则 -->
        <div class="ub ub-ver  pad_left7  maxW bor bc-head mar_t5">
          <div class="ub ub-ac umh5">
            挑战规则（中断上传，即挑战失败）
          </div>
          <div class="ub ub-ac">
            挑战时间
            <span id="starttime">{{pageData[0].StartDate | date:"yyyy-MM-dd " }}</span>至
            <span id="endtime">{{pageData[0].EndDate | date:"yyyy-MM-dd " }}</span>
          </div>
          <div class="umh5 line_height " id="chanllengge_count1" *ngIf="!(pageData[0].Classify==30)">
            每周至少上传
            <span id="WeekRate1">{{pageData[0].WeekRate}}</span>天
          </div>
          <!-- <div class="umh5 line_height  umar-t" id="chanllengge_count2" *ngIf="pageData[0].Classify==30">
            <span class="umar-r">挑战数值</span>
            <span id="WeekRate2">{{pageData[0].Number}}</span>
          </div> -->
        </div>
        <!-- 挑战获取聚豆说明 -->
        <div class="ub ub-ver  pad_left7  maxW bor bc-head mar_t5">
          <div class="ub ub-ac umh5 fontsize9">
            战豆获取说明
          </div>
          <div class="ub ub-ac umh">
            输赢：获胜均分战败着的战豆；
          </div>
          <div class="ub ub-ac umh5">
            全赢：平台发放
            <span id="GFIntegral">{{pageData[0].GFIntegral}}</span>，以资奖励；
          </div>
          <div class="ub ub-ac umh">
            全输：平台扣除所有参与方的战豆；
          </div>
          <div class="ub ub-ac umh5">
            其它：获胜方均分战败方的战豆；
          </div>
        </div>
        <!-- 奖赏与惩罚 -->
        <div id="list1" [hidden]="!(pageData[0].UserID | dataWallet:'isUserId')">
          <div class="ub ub-ver pad_left7  maxW bor bc-head mar_t5">
            <div class="ub ub-ac umh5 fontsize9">
              奖赏
            </div>
            <div class="umar-b word_break" style="line-height: 1.5em;" id="jiangli">
              {{pageData[0].RewardMessage}}
            </div>
          </div>
          <div class="ub ub-ver pad_left7  maxW bor bc-head mar_t5">
            <div class="ub ub-ac umh5 fontsize9">
              惩罚
            </div>
            <div class="umar-b word_break" style="line-height: 1.5em;" id="chengfa">
              {{pageData[0].PunishmentMessage}}
            </div>
          </div>
        </div>
      </div>
      <!--  排行-->
      <div class="ranking" [hidden]="!(act[1])">
        <ion-list>
          <ion-item *ngFor="let iem of RankingList; let i=index">
            <span item-start class="ionc-ioc">
              <ng-container *ngIf="i==0; then i==2; else i==3;">
                1
              </ng-container>
              <ng-template #thenTemplate>
                2
              </ng-template>
              <ng-template #elseTemplate>
                3
              </ng-template>
              <ng-template #elseTemplate>
                {{i+1}}
              </ng-template>

            </span>
            <img class="avatar" src="{{iem.HeadPortrait | imgUrl:'base64'}}" />
            <h3 class="name">{{iem.UserName}}</h3>
            <span item-end>{{iem.Counts}}次</span>
          </ion-item>
        </ion-list>
      </div>
      <!-- 打卡 -->
      <div [hidden]="!(act[2])">
        <div class="ub bc-head ub-ac mar_t5" style="height: 6em;">
          <div class="ub ub-f1" id="userDTlist">
            <!-- 人员列表 -->
            <div class="ub ub-f1 ub-con ub-ver ub-ac ub-pc" *ngFor="let item of userDTlist" (click)="tabUser(item)">
              <div class="ub-img1  user_wh" [ngStyle]="{'background-image': item.HeadPortrait | imgUrl:'HeadportraitUrl':'backImg'}">
                <div class="ub-img" [ngClass]="{'huangguan_two1':ishuanggun(item)}"></div>
              </div>
              <div class="fontsize8 umar-t oneline word_break tx-c">{{item.name_tab}}</div>
            </div>
          </div>
          <!-- end 人员列表 -->
          <div class="ub-img jiayou_wh umar-r" (click)="openCR()"></div>
        </div>
        <!-- 动态list -->
        <div id="userDTlist_select" class="ub ub-ver ">

        </div>
        <!-- End 动态list -->
      </div>
      <div *ngIf="isJonbnt" (click)="openTiaozhan()" class="tx-c btn_lz ub-ac ub-pc color_white "> 参加挑战 </div>
    </div>
  </div>
</ion-content>